<template>
  <div id="view-head-page">
    <div class="content">
      <img :src="!$chy.isEmpty(userInfo.backImg) ? `${baseImgDownLoadUrl}${userInfo.backImg}` : bgImg" alt="" class="bgImg">
      <div class="headInfo">
        <div class="avatar">
          <img :src="!$chy.isEmpty(userInfo.avatar) ? `${baseImgDownLoadUrl}${userInfo.avatar}` : iconAvatar" alt="">
        </div>
        <div class="info">
          <div class="name f20 font5 fw900 text-shadow">{{ !$chy.isEmpty(userInfo.name) ? userInfo.name : '' }}</div>
          <div class="sign font5 text-shadow">{{ !$chy.isEmpty(userInfo.description) ? userInfo.description : '' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'head-page',
  data() {
    return {
      iconAvatar: require('@/assets/img/head.jpg'),
      bgImg: require('@/assets/img/headBg.png')
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  }
}
</script>

<style lang="scss" scoped>
#view-head-page {

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;

    .bgImg {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
    }

    .headInfo {
      position: absolute;
      display: flex;
      left: 20px;
      bottom: 10px;

      .avatar {
        width: 55px;
        height: 55px;
        margin-right: 10px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-evenly;
      }
    }
  }
}</style>